import 'package:auto_route/auto_route.dart';
import 'package:convergence_media/navigator/app_router.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class ConvergenceAppTab extends StatelessWidget {
  const ConvergenceAppTab({required this.child, super.key});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Tab(
      height: 40,
      iconMargin: EdgeInsets.zero,
      child: child,
    );
  }
}

class ConvergenceAppTabBar extends ConsumerWidget {
  const ConvergenceAppTabBar({
    required TabsRouter tabsRouter,
    required TabController tabController,
    required List<Widget> tabs,
    super.key,
  })  : _tabs = tabs,
        _tabController = tabController,
        _tabsRouter = tabsRouter;

  final TabsRouter _tabsRouter;
  final TabController _tabController;
  final List<Widget> _tabs;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final router = AutoRouter.of(context);

    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      child: Row(
        children: [
          IconButton(
            onPressed: () {
              // TODO(lilua): 跳转搜索页
            },
            icon: const Icon(Icons.search),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: TabBar(
                controller: _tabController,
                labelColor: Colors.black,
                labelStyle: const TextStyle(
                  color: Colors.red,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
                unselectedLabelColor: Colors.black54,
                unselectedLabelStyle: const TextStyle(color: Colors.black54),
                onTap: _tabsRouter.setActiveIndex,
                indicatorSize: TabBarIndicatorSize.label,
                padding: EdgeInsets.zero,
                indicatorColor: Colors.red,
                labelPadding: EdgeInsets.zero,
                tabs: _tabs.map((e) => ConvergenceAppTab(child: e)).toList(),
              ),
            ),
          ),
          IconButton(
            onPressed: () => router.push(const MeRoute()),
            icon: const Icon(Icons.person_outline),
          ),
        ],
      ),
    );
  }
}
